<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>

<body>
    <form>
        <p>
            邮箱：<input type="text" id="email" onblur="checkEmail()" />
        </p>
        <p>
            密码：<input type="password" id="password" />
        </p>
        <p>
            确认密码：<input type="password" id="repassword" />
        </p>
        <p>
            验证码：<input type="text" id="code" /> <span id="sCode" onclick="sendEmailCode()">获取验证码</span>
        </p>
        <input type="button" onclick="reg()" value="注册" />
    </form>
    <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script>
        var regFlag = false;
        function checkEmail() {
            $.ajax({
                url: "/api/user/isRegistered/" + $("#email").val(),
                type: 'get',
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("error");
                },
                xhrFields: { withCredentials: true },
                success: function (data, status, xhr) {
                    if (Boolean(data)) {
                        alert("邮箱已注册")
                    }
                    else {
                        regFlag = true;
                    }
                }
            });
        }


        var second = 60
        var emailFlag = true;
        function sendEmailCode() {
            if (!regFlag) {
                alert("请输入正确的邮箱地址");
            }

            if (!emailFlag) {
                return;
            }

            $.ajax({
                url: "/api/code/create/" + $("#email").val(),
                type: 'get',
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("error");
                },
                xhrFields: { withCredentials: true },
                success: function (data, status, xhr) {
                    if (Boolean(data)) {
                        alert("发送成功");
                        emailFlag = false;
                        var interval = setInterval(function () {
                            second--
                            $("#sCode").text((second) + "秒")
                            if (second === -1) {
                                $("#sCode").text("重发验证码");
                                clearInterval(interval);
                                emailFlag = true;
                            }
                        }, 1000)
                    }
                    else {
                        alert("发送失败")
                    }
                }
            });
        }

        function reg() {
            if ($("#password").val() != $("#repassword").val()) {
                alert("请输入正确密码");
                return;
            }

            if (!regFlag) {
                alert("请输入正确的邮箱地址");
            }

            $.ajax({
                url: "/api/user/register/" + $("#email").val() + "/" + $("#password").val() + "/" + $("#code").val(),
                type: 'get',
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("error");
                },
                xhrFields: { withCredentials: true },
                success: function (data, status, xhr) {
                    if (Boolean(data)) {
                        alert("注册成功,请登录")
                        window.location.href = "login.html";
                    }
                    else {
                        alert("注册失败")
                    }
                }
            });
        }

    </script>
</body>

</html>